<template>
  <div id="tabbar">
    <tab-bar>
      <tabbar-item path = '/home' >
         <template v-slot:item-icon>
        <img src="~@/assets/img/home/shouye.svg" alt="">
        </template>
        <template v-slot:item-icon-actvie>
        <img src="~@/assets/img/home/homeactive.svg" alt="">
        </template>
        <template v-slot:item-text>
        <div>首页</div>
        </template>
      </tabbar-item>
      <tabbar-item path = '/fenlei' color = 'blue'>
        <template v-slot:item-icon>
        <img src="~@/assets/img/fenlei/分类.svg" alt="">
        </template>
        <template v-slot:item-icon-actvie>
        <img src="~@/assets/img/fenlei/fenleiactive.svg" alt="">
        </template>
        <template v-slot:item-text>
        <div>分类</div>
        </template>
      </tabbar-item>
      <tabbar-item path = '/gouwuche' color = 'blue'>
      <template v-slot:item-icon>
        <img src="~@/assets/img/gouwuche/购物车.svg" alt="">
        </template>
        <template v-slot:item-icon-actvie>
        <img src="~@/assets/img/gouwuche/gouwucheactive.svg" alt="">
        </template>
        <template v-slot:item-text>
        <div>购物车</div>
        </template>
      </tabbar-item>
      <tabbar-item path = '/geren' color = 'blue'>
       <template v-slot:item-icon>
        <img src="~@/assets/img/geren/个人.svg" alt="">
        </template>
        <template v-slot:item-icon-actvie>
        <img src="~@/assets/img/geren/gerenactvie.svg" alt="">
        </template>
        <template v-slot:item-text>
        <div>个人</div>
        </template>
      </tabbar-item>
    </tab-bar>
  </div>
</template>


<script>
import TabBar from '@/components/common/Tabbarcommon/Tabbar.vue'
import tabbarItem from '@/components/common/Tabbarcommon/tabbarItem.vue'

export default {
  name: 'tabbar',
  components: {
    TabBar,
    tabbarItem
  }
} 
</script>

<style>
</style>
